popup menu by CSS & JS

popup menus are very popular now a days.There are many software which helps us to create popup menus.Those software use a JavaScript file.But the main problem is its really tough to edit that JS file without that software.And one software doesn’t support another software’s files.So i was looking for some simple script which will helps me understand and what can i change when ever i want.Then i found a nice solution its based on CSS and javaScript.It is using visibility property.Here is an example.

<div id="MENU"
  style="position:relative; width:80px; text-align:center;
  background-color:#DC6000; color:#FFFFFF; cursor:hand"
    onmouseover="document.getElementById('ITEMS').style.visibility='visible'"
    onmouseout="document.getElementById('ITEMS').style.visibility='hidden'">
      Menu
</div>

<div id="ITEMS"
style="position:relative; visibility:hidden; width:80px; text-align:center;
background-color:#DEB887; color:#FFFFFF"
  onmouseover="this.style.visibility='visible'"
  onmouseout="this.style.visibility='hidden'">

  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 1
  </div>
  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 2
  </div>
  <div style="background-color:#DEB887"
    onmouseover="this.style.backgroundColor='#9D4602'"
    onmouseout="this.style.backgroundColor='#DEB887'"
    onclick="location='url'">
      Menu Item 3
  </div>

</div>

<p>Other page content...</p>

Just copy and paste the code inside a HTML file and watch :).